import { XmImage, XmNavbar, XmPullRefresh } from "@/components/tool";
import { observer } from "mobx-react";
import React, { Fragment, useEffect, useRef, useState } from "react";
import { BaseRouter } from "@path/router"
import { View, Button, Input, Form } from "@tarojs/components";
import { userStore } from "@/store";
import { getCode } from "@/path/acrossAPI";
import Taro from "@tarojs/taro";
import loginBgImage from "@/static/images/verification.png";
import { Cell } from "@taroify/core";
import './index.scss'
import { XmToast } from "@/components/public";
function Index() {
  const [loading, setLoading] = useState(false)
  const userCode = useRef("")
  function getUserCode() {
    getCode().then(code => userCode.current = code)
  }
  useEffect(getUserCode, [])

  // 授权登录账号
  const Login = (ev) => {
    const { userName } = ev.detail.value
    // // 先检查有没有勾选同意xx
    if (!userName) {
      return XmToast.open("请输入您的昵称")
    }
    setLoading(true)
    Taro.getUserInfo().then((res) => {
      return userStore.wxLogin({
        code: userCode.current,
        ...res,
        userName,
      })
    }).then((res) => {
      BaseRouter.back({ data: res })
    }).finally(() => {
      getUserCode()
      setLoading(false)
    })
  }
  return <Form onSubmit={Login}>
    <View className="bg-page">
      <XmNavbar title="登录" fixed={false}></XmNavbar>
      <XmPullRefresh navigationStyle="custom" className="login-page" renderButtom={<View className="btm-btnbox iphonex-bottom c-white">
        <Button loading={loading} formType="submit" className="btm-btn1">登录注册</Button>
      </View>}>
        <View className="login t-center">
          <XmImage src={loginBgImage} static size="684*492"></XmImage>
        </View>
        <View className="login-ipt">
          <Cell title="请输入您的昵称">
            <Input type="nickname" name="userName" placeholder="请输入昵称"></Input>
          </Cell>
        </View>
      </XmPullRefresh>
    </View>
  </Form>
}

const Higher = React.memo(observer(Index));
export default () => <Fragment><Higher /></Fragment>
